import React from 'react'
import { connect } from 'react-redux'
import store from '../store/store'
import { withRouter } from 'react-router-dom'
import playstop from '../assets/images/playButton.png'
import play from '../assets/images/playStrop.png'
require('./audio/audio.css')

//定义映射函数
//映射状态到ui组件的props
const mapStateToProps = (state) => {
    return {
        state
    }
}
class Audio extends React.Component {
    constructor(props) {
        super(props)
// console.log(props)
        this.state = {
            //默认音乐不播放
            isPlay: props.state.getPlay,
            songUrl: "",
            songImg: "",
            songTitle: "",
            songArits: "",
  
        }
    }
    componentWillReceiveProps(props) {
        this.setState({
            songUrl: props.state.getsongUrl.songUrl,
            songImg: props.state.getsongImg.songImg,
            songTitle: props.state.getsongTitle.songTitle,
            songArits: props.state.getArits.songArits,
            songId: props.state.getSongId.songId
        })
    }
    //音乐播放
    play(is) {
        console.log(is)
        console.log(this.state.isPlay)
        let audio = document.querySelector('audio')
        if (is) {
            this.setState({
                isPlay: true,
         
            })
            store.dispatch({
                type: 'GET_PLAY',
                payload: { isPlay: true }
            })
            audio.play()
        }
    }
    //音乐暂停
    playstop(is) {
        console.log(is)
        let audio = document.querySelector('audio')
        if (is) {
            this.setState({
                isPlay: false,
            })
            store.dispatch({
                type: 'GET_PLAY',
                payload: { isPlay: false }
            })
            audio.pause()
        }
    }
    render() {
        const { songUrl, songImg, songTitle, songArits, isPlay ,songId} = this.state
        // console.log(lyrSong)
        return (
            <div className={ this.state.songUrl=="" ? "AudioPlay":"AudioPlaySong"}>
                <div>
                    <img src={songImg} alt="" className={isPlay ? "songImgCircle" : "songImg"} onClick={() => {
                        this.props.history.push('/player', { songUrl, songImg, songTitle, songArits, isPlay,songId })
                    }} />
                </div>
                <h1 className="songTitle">{songTitle}</h1>
                <p className="songAr">{songArits}</p>
                <img src={playstop} alt="" className="playstop" onClick={this.play.bind(this, true)} style={{ display: (isPlay) ? "none" : "block" }} />
                <img src={play} alt="" className="play" style={{ display: (isPlay) ? "block":"none" }}  onClick={this.playstop.bind(this, true)} />
                <audio src={songUrl}
                    loop
                    autoPlay
                    className="audioself"
                />
            </div>
        )

    }
}
export default withRouter(connect(mapStateToProps)(Audio))